<template>
  <div>
    <!-- 列表 -->
    <basic-layout title="商品列表" :showAddBtn="false">
      <div class="columnFlex">
        <!-- 查询条件 -->
        <van-row class="search-row">
          <van-search
            v-model="formData.keyword"
            maxlength="20"
            show-action
            label=""
            placeholder="商品名称"
            @search="onRefresh"
          >
            <template #action>
              <div @click="onRefresh">搜索</div>
            </template>
          </van-search>
        </van-row>
        <div class="tagBox">
          <div role="button" @click="handleQuery(0)" class="menuItem">
            <span class="menu__title" style="position: initial"
              ><div class="van-ellipsis">默认</div></span
            >
          </div>

          <div
            role="button"
            v-for="(item, i) in btnList"
            :key="i"
            @click="handleQuery(item.value)"
            class="menuItem"
          >
            <span class="menu__title">
              <div class="van-ellipsis" @click="handleSpan('0')">
                {{ item.lable }}
              </div>
              <div>
                <span class="top" @click="handleSpan('2')"></span>
                <span class="bottom" @click="handleSpan('1')"></span>
              </div>
            </span>
          </div>
        </div>
        <van-row class="listCon">
          <van-pull-refresh
            class="pullRefresh"
            v-model="refreshLoading"
            @refresh="onRefresh"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="listData.length ? '没有更多了' : ''"
              @load="onLoad"
            >
              <div class="goodBox">
                <div
                  class="goods-item"
                  v-for="item in listData"
                  :key="item.goodsId"
                >
                  <div class="item">
                    <img
                      @click="handleClick(item)"
                      :src="
                        fileUrlObj[item.goodsMainFileCode] ||
                        (loading
                          ? 'images/loading.gif'
                          : 'images/noImgData.png')
                      "
                    />
                    <div class="item-detail">
                      <div
                        class="van-multi-ellipsis--l2"
                        style="word-break: break-all; font-size: 13px"
                      >
                        {{ item.goodsName }}
                      </div>
                      <div style="width: 89%; position: absolute; bottom: 4px">
                        <div class="priceBox">
                          <p class="price">
                            ￥<span
                              class="new-price"
                              @click="handleClick(item)"
                              >{{ item.startSellingPrice }}</span
                            >
                          </p>
                          <van-icon
                            class="iconr"
                            name="like-o"
                            v-if="item.isFav == 0"
                            @click="handleTuck(item)"
                          />
                          <van-icon v-else class="iconr iconRe" name="like" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
            <van-empty
              v-if="!spinLoading && !listData.length"
              class="custom-image"
              :image="require('../../../../assets/images/empty.png')"
              description="暂无数据"
            />
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>
    <full-loading v-if="spinLoading"></full-loading>
    <!-- 新增/详情/编辑 弹出框 -->
    <fullscreenModal
      :modal="fullscreenModal"
      :isAdd="false"
      label="商品"
      :isShowEdit="false"
      editType="detail"
      @handleClose="fullscreenModal = false"
      @handleSave="$refs.editFormRef.handleSave()"
    >
      <detail
        ref="detailRef"
        @close="fullscreenModal = false"
        @refresh="onRefresh"
      ></detail>
    </fullscreenModal>
  </div>
</template>

<script>
import $ from "jquery";
import { queryFileList } from "@/api/common";
import detail from "./detail";
import { searchPage, goodSave } from "@/api/srvAssurance/shoppingMall/markeApi";
export default {
  components: { detail },
  data() {
    return {
      formData: {
        keyword: "",
        networkId: "",
        platformCategoryCode: "",
        siteCategoryId: "",
        sort: "",
        direction: "",
        pageNum: 1,
        pageSize: 10,
      },
      btnList: [
        { lable: "销量", status: 0, value: "1" },
        { lable: "价格", status: 0, value: "2" },
      ],
      loading: false,
      finished: false,
      fullscreenModal: false,
      refreshLoading: false,
      spinLoading: false,
      listData: [],
      fileUrlObj: {},
    };
  },
  mounted() {
    let data = this.$route.query.value || "";
    for (var key in this.formData) {
      if (data[key] || data[key] === 0) {
        this.formData[key] = data[key];
      }
    }
    this.formData.keyword = this.$route.query.data || "";
    this.formData.platformCategoryCode = data.pcategoryCode;
    this.getSearch();
  },
  methods: {
    handleQuery(val) {
      $(".menu__title").removeClass("active");
      let div = $(".menu__title")[val];
      $(div).toggleClass("active");
      this.formData.sort = val;
      this.onRefresh();
    },
    // 获取表格数据
    getSearch() {
      if (
        this.formData.keyword &&
        !this.$commonReg.textReg.test(this.formData.keyword)
      ) {
        this.$Notify({
          type: "warning",
          message: `关键字${this.$commonReg.textMsg}`,
        });
        return;
      }
      this.spinLoading = true;
      searchPage(this.formData)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            this.listData = [...this.listData, ...res.data.records];
            let fileCodeArr = [];
            res.data.records.forEach((val, i) => {
              if (
                val.goodsMainFileCode &&
                !this.fileUrlObj[val.goodsMainFileCode]
              ) {
                fileCodeArr.push(val.goodsMainFileCode);
                this.fileUrlObj[val.goodsMainFileCode] = "";
              }
            });
            if (fileCodeArr.length) {
              this.queryFileInfoData(fileCodeArr);
            }
            if (this.listData.length >= res.data.total) {
              this.finished = true;
            }
          } else {
            this.finished = true;
          }
          setTimeout(() => {
            this.spinLoading = false;
          }, 400);
        })
        .catch(() => {
          this.spinLoading = false;
          this.finished = true;
        });
    },
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getSearch();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getSearch();
    },
    // 点击子应用
    handleClick(item) {
      this.fullscreenModal = true;
      this.$refs.detailRef.formReset();
      this.$refs.detailRef.getData(item.goodsId);
    },
    // 收藏商品
    handleTuck(val) {
      goodSave(val.goodsId).then((res) => {
        if (res.code == 1000) {
          this.$Notify({ type: "success", message: "收藏成功！" });
          this.onRefresh();
        }
      });
    },
    // 获取图片信息
    queryFileInfoData(fileCodeArr) {
      this.loading = true;
      queryFileList(fileCodeArr)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            res.data.forEach((item) => {
              this.fileUrlObj[item.fileCode] = item.url;
            });
            this.$forceUpdate();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    .top {
      padding: 0 10px;
      box-sizing: border-box;
      float: left;
    }
    .bottom {
      margin-top: 3px;
      padding: 3px 10px 0;
      border-top: 1px solid #eee;
      clear: both;
    }
    .other {
      margin: 1px;
      text-align: right;
      font-size: 13px;
      float: right;
    }
  }
  .flex {
    clear: both;
  }
}

/deep/.van-nav-bar__content {
  background: #1e93ff;
  .van-nav-bar__title {
    color: #fff;
  }
}
.tagBox {
  width: 100%;
  display: flex;
  align-items: center;
  height: 30px;
  p {
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  .actile {
    color: #ee0a24;
  }
}
.goodBox {
  margin: 5px 0px 5px 5px;
  display: flex;
  flex-wrap: wrap;
}
.goods-item {
  flex-basis: 50%;
  margin-bottom: 8px;
  .item {
    border-radius: 5px;
    margin-right: 5px;
    overflow: hidden;
    background-color: #fff;
  }
  img {
    width: 100%;
    height: 165px;
  }
  .item-detail {
    padding: 5px 10px 5px 10px;
    min-height: 59px;

    position: relative;
  }
  .priceBox {
    display: flex;
    margin-top: 2px;
  }
  .price {
    flex: 1;
    font-weight: 500;
    font-size: 12px;
    color: #ee0a24;
  }
  .new-price {
    font-size: 20px;
  }
  .iconr {
    text-align: right;
    font-size: 20px;
  }
  .iconRe {
    color: #e1251b;
  }
}
.listCon {
  padding: 0;
}
.menuItem {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  cursor: pointer;
}
.menu__title {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 0.21333rem;
  color: #323233;
  font-size: 0.4rem;
  line-height: 0.58667rem;
}
.active {
  color: #ee0a24;
}

.top {
  top: 5px;
  border-style: solid;
  border-width: 0 0.128rem 0.13rem;
  border-color: transparent transparent #999999;
  position: absolute;
  bottom: 14px;
  right: -0.2rem;
}
.top:hover {
  cursor: pointer;
  border-color: transparent transparent #ee0a24;
}

.bottom {
  border-style: solid;
  border-width: 0 0.128rem 0.13rem;
  transform: rotate(180deg);
  border-color: transparent transparent #999999;
  position: absolute;
  top: 13px;
  right: -0.21rem;
}
.bottom:hover {
  cursor: pointer;
  border-color: transparent transparent #ee0a24;
}
</style>
